//找到btn
let btn = document.querySelector('.btn')
//找到ul
let ul = document.querySelector('.list')

//颜色数组
let arr = ['red', 'blue', 'yellow', 'gray']

function getLi() {
    let li = document.createElement('li')
    li.style.border = '1px solid black'
    li.style.width = '50px'
    li.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li.innerHTML = '0'
    ul.appendChild(li)
}

function getLi1() {
    let li1 = document.createElement('li')
    li1.style.border = '1px solid black'
    li1.style.width = '50px'
    li1.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li1.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li1.innerHTML = '1'
    ul.appendChild(li1)
}
function getLi2() {
    let li2 = document.createElement('li')
    li2.style.border = '1px solid black'
    li2.style.width = '50px'
    li2.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li2.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li2.innerHTML = '2'
    ul.appendChild(li2)
}
function getLi3() {
    let li3 = document.createElement('li')
    li3.style.border = '1px solid black'
    li3.style.width = '50px'
    li3.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li3.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li3.innerHTML = '3'
    ul.appendChild(li3)
}
function getLi4() {
    let li4 = document.createElement('li')
    li4.style.border = '1px solid black'
    li4.style.width = '50px'
    li4.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li4.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li4.innerHTML = '4'
    ul.appendChild(li4)
}

function getLi5() {
    let li5 = document.createElement('li')
    li5.style.border = '1px solid black'
    li5.style.width = '50px'
    li5.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li5.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li5.innerHTML = '5'
    ul.appendChild(li5)
}
function getLi6() {
    let li6 = document.createElement('li')
    li6.style.border = '1px solid black'
    li6.style.width = '50px'
    li6.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li6.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li6.innerHTML = '6'
    ul.appendChild(li6)
}
function getLi7() {
    let li7 = document.createElement('li')
    li7.style.border = '1px solid black'
    li7.style.width = '50px'
    li7.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li7.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li7.innerHTML = '7'
    ul.appendChild(li7)
}
function getLi8() {
    let li8 = document.createElement('li')
    li8.style.border = '1px solid black'
    li8.style.width = '50px'
    li8.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li8.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li8.innerHTML = '8'
    ul.appendChild(li8)
}
function getLi9() {
    let li9 = document.createElement('li')
    li9.style.border = '1px solid black'
    li9.style.width = '50px'
    li9.style.height = '50px'
    let index = Math.floor(Math.random() * arr.length)
    li9.style.backgroundColor = arr[index]
    console.log(arr[index]);
    li9.innerHTML = '9'
    ul.appendChild(li9)
}




btn.onclick = function () {
    getLi()
    getLi1()
    getLi2()
    getLi3()
    getLi4()
    getLi5()
    getLi6()
    getLi7()
    getLi8()
    getLi9()
}